<template>
  <div class="goodsEntry">
      
      <el-form :inline="true" style="padding: 20px">
          <el-form-item label="扫码录入日期：">
              <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              
              v-model="endtime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关键字搜索：">
            <el-input style="width: 300px;" v-model="queryData.goodsId" placeholder="请输入商品ID,商品名称" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="SKU编码：">
             <el-input style="width: 300px;" v-model="queryData.skuNo" placeholder="请输入商品SKU编码" size="medium"></el-input>
              <!-- <el-select v-model="categoryvalue" size="medium" @change="changecatey">
                  <el-option :value="item.value" :label="item.label" v-for="item in category" :key="item.index"></el-option>
                </el-select>
              <el-select v-model="queryData.goodsKindSecond" size="medium">
                <el-option :value="item.id" :label="item.name" v-for="item in goodsKindSecond" :key="item.index"></el-option>
              </el-select> -->
          </el-form-item>
          <el-form-item label="">
           <el-button type="primary" size="medium" @click="query">查询</el-button>
          </el-form-item>
          <!-- <el-form-item label="">
            <el-button type="primary" size="medium" @click="okentry">录入新商品</el-button>
          </el-form-item> -->
      </el-form>
  <div class="wrapper">
      <el-table class="table" :data="tableData" stripe highlight-current-row border  @selection-change="handleSelectionChange">
          <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <!-- <el-table-column align="center" type="selection">
          </el-table-column> -->
        <el-table-column align="center" prop="goods_id" label="商品ID">
        </el-table-column>
        <el-table-column align="center" prop="create_time" label="扫码录入时间">
        </el-table-column>
        <el-table-column align="center" prop="goods_no" label="商品编码">
        </el-table-column>
        <el-table-column align="center" prop="goods_name" label="商品名称">
        </el-table-column>
        <el-table-column align="center" prop="sku_no" label="SKU编码">
        </el-table-column>
        <el-table-column align="center" prop="goods_kind_first" label="商品类别">
        </el-table-column>
        <el-table-column align="center" prop="odor_type" label="香型">
        </el-table-column>
        <el-table-column align="center" prop="net_content" label="净含量">
        </el-table-column>
        <el-table-column align="center" prop="alocohl" label="酒精度">
        </el-table-column>
        <el-table-column align="center" prop="unit" label="单位">
        </el-table-column>
        <el-table-column align="center" prop="wineYear" label="年份">
        </el-table-column>
        <el-table-column align="center" prop="raw_desc" label="原料">
        </el-table-column>
      </el-table>
     <div style="height:50px">
      <!-- <el-pagination 
       background layout="total,prev, pager, next,jumper" 
      :page-size="page.pageSize" 
      :total="page.total" 
      :current-page="page.current"
     
       :page-sizes="[100, 200, 300, 400]"
        @current-change="handleCurrentChange">
       
      </el-pagination> -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[10,20,30]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
     </div>
    </div>
  
  </div>
</template>

<script>
  export default {
    data() {
      return {
        height: "auto",
        queryData: {
          startTime:'',
          endTime:'',
          goodsId:'',
          status:1,
          skuNo:''
        },
        categoryvalue:'',
        category:[],
        goodsKindSecond:[],
        goodsCates: {
          show: false,
          tableData: [{}]
        },
        tableData: [{}],
        
        endtime:'',
        page: {
          pageSize: 10,
          current: 1,
          total: null
        }
      };
    },
    mounted () {
      this.tableList();
      this.categoryList();
    },
    methods: {
      //初始化数据
      async tableList() {
          try {
            let { data } = await this.$post({
              api: "/show/managegoods",
              data:{
                current:this.page.current,
                pageSize:this.page.pageSize,
                startTime:this.queryData.startTime,
                endTime:this.queryData.endTime,
                goodsId:this.queryData.goodsId,
                status:1,
                skuNo:this.queryData.skuNo
              }
            });
            if (data.code === 0) {
              this.tableData = data.data;
              this.page.total = data.rdPage.total;
              // this.page.total = data.rdPage.total;
              // console.log(data)
              // this.rawList = data.data;
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            // this.$message({
            //   type: "error",
            //   message: "接口报错"
            // });
          }
       },
       //商品分类接口
       async categoryList() {
          try {
            let { data } = await this.$post({
              api: "/show/leftmenu",
             
            });
            if (data.code === 0) {
              console.log(data)
              console.log(this.category)
              this.category.push({
                value:data.data[0].id,
                label:data.data[0].name
              })
              // this.goodsKindSecond = data.data[0].attrKeyList;

              
              // this.tableData = data.data;
              // this.page.total = data.rdPage.total;
              // console.log(data)
              // this.rawList = data.data;
            } else {
              // this.$message({
              //   type: "error",
              //   message: data.msg
              // });
            }
          } catch (e) {
            // this.$message({
            //   type: "error",
            //   message: "接口报错"
            // });
          }
       },
       async categoryid(id) {
          try {
            let { data } = await this.$post({
              api: "/show/propertyInfo",
              data:{
                id:id
              }
            });
            if (data.code === 0) {
              console.log(data)
             
              this.goodsKindSecond = data.data.attrKeyList;
            } else {
              // this.$message({
              //   type: "error",
              //   message: data.msg
              // });
            }
          } catch (e) {
            // this.$message({
            //   type: "error",
            //   message: "接口报错"
            // });
          }
       },
       changecatey(id){
        this.categoryid(id)
         console.log(id)
       },
       //全选
       handleSelectionChange(val){
         console.log(val)
       },
       //页码
       handleCurrentChange(val) {
        this.page.current = val;
        this.tableList();
        console.log(val);
      },
      handleSizeChange(val){
        this.page.pageSize = val;
        this.tableList();
      },
      //查询
      query() { 
        this.tableList()
      },
     //确定录入
      okentry(){
        this.$router.push('/goodsEntry/detail')
      },
      canceloffAll() {
        this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      canceloffOne(id) {
        this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
      },
      showCateDialog() {
        this.goodsCates.show = true;
      },
      //时间选择器
      changeTime(arr){
        console.log(arr)
        if(arr != null){
          this.queryData.startTime = arr[0];
          this.queryData.endTime = arr[1];
        }else{
          this.queryData.startTime = '';
          this.queryData.endTime = '';
        }
        
      }
      
    }
  };
</script>

<style lang="scss" scoped>
  .query {
    overflow: hidden;
    border-bottom: 1px solid #eeeeee;
    &-item {
      float: left;
      margin: 15px 20px;
    }
    .el-input {
      width: 150px;
    }
    .el-button {
      margin: 0 15px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .entry-info {
    padding: 15px 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .goods-category {
    line-height: 32px;
    span {
      color: #0033ff;
      text-decoration: underline;
      cursor: pointer;
    }
  }

  .goods-count {
    line-height: 32px;
  }

  .goods-id {
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    span {
      position: relative;
      display: inline-block;
      padding: 8px 15px;
      border: 1px solid #333;
      &:after {
        content: "";
        position: absolute;
        top: -6px;
        left: -6px;
        width: 100%;
        height: 100%;
        padding: 6px;
        border: 1px solid #333;
      }
    }
  }

  .wrapper {
    padding: 10px 15px;
  }

  .canceloff-btn {
    color: #0033ff;
    cursor: pointer;
  }
</style>